<template>
    <div>

      <div v-if="label == 'fullname'">
        <div class="custNameBox" style="display: inline-flex;width: 200px">
          <img :src="col.logoUrl" class="custLogo" v-if="col.logoUrl"/>
          <span v-else style="background:#325893;color: white" class="custDefaultTitle">{{col.fullname.slice(0,1)}}</span>
          <span class="fullname more" @click="toDetail(col.id)">{{col.fullname}}</span>
          <i class="icon-myshare" v-if="col.shareStatus" title="共享客户" style="margin-left: 5px;color: #345A91" @click="cancelCustShare(col.id)"></i>
        </div>
      </div>

      <div v-if="label == 'countryName'">
        <div>
          <svg class="icon" aria-hidden="true" style="font-szie:22px">
            <use :xlink:href="`#icon-${col.countryIcon}`"></use>
          </svg>
          <br>{{col.countryName}}
        </div>
      </div>

      <div v-if="label == 'website'">
        {{col.website}}
      </div>

      <div v-if="label == 'addrs'">
        {{col.addrs}}
      </div>

      <div v-if="label == 'turnOverName'">
        {{col.turnOverName}}
      </div>

      <div v-if="label == 'personName'">
        {{col.personName}}
      </div>

      <div v-if="label == 'fax'">
        {{col.fax}}
      </div>

      <div v-if="label == 'tel'">
        {{col.tel}}
      </div>

      <div v-if="label == 'custNo'">
        {{col.custNo}}
      </div>

      <div v-if="label == 'bussTypeName'">
        {{col.bussTypeName}}
      </div>

      <div v-if="label == 'gradeType'">
        <div v-if="col.gradeType == ''">
          <el-rate
            :disabled="custType!= 'my'"
            @change="(value)=>changeRate(col.id, value)">
          </el-rate>
        </div>
        <el-rate
          v-else
          v-model="col.gradeType"
          :disabled="custType!= 'my'"
          @change="(value)=>changeRate(col.id, value)">
        </el-rate>
      </div>

      <div v-if="label == 'remarks'">
        {{col.remarks}}
      </div>

      <div v-if="label == 'socailInfo'">
        {{col.socailInfo}}
      </div>

      <div v-if="label == 'belongTo'">
        {{col.belongTo}}
      </div>

      <div v-if="label == 'industryName'">
        {{col.industryName}}
      </div>

      <div v-if="label == 'defaultLinker'">
        {{col.defaultLinker}}
      </div>

      <div v-if="label == 'defaultEmail'">
        {{col.defaultEmail}}
      </div>

      <div v-if="label == 'defaultTelFax'">
        {{col.defaultTelFax}}
      </div>

      <div v-if="label == 'socialAccounts'">
        {{col.socialAccounts}}
      </div>

      <div v-if="label == 'postType'">
        {{col.postType}}
      </div>

      <div v-if="label == 'defaultRemarks'">
        {{col.defaultRemarks}}
      </div>

      <div v-if="label == 'mainProducts'">
        {{col.mainProducts}}
      </div>

      <div v-if="label == 'typeName'">
        {{col.typeName}}
      </div>

      <div v-if="label == 'custMarkVos'">
        <div>
          <el-tag
            v-for="(item,index) in col.custMarkVos"
            :label="index"
            size="medium"
            class="tag"
            :closable="custType== 'my'"
            style="margin:5px;color: white"
            :style="{backgroundColor:item.markColor}"
            effect="dark"
            :disable-transitions="false"
            @close="unlabel(col.id,item.id)">
            {{item.markName}}
          </el-tag>
        </div>
      </div>




      <div v-if="label == 'resource'">
        {{col.resource}}
      </div>

      <div v-if="label == 'followUserName'">
        {{col.followUserName}}
      </div>

      <div v-if="label == 'lastActionContent'">
        {{col.lastActionContent}}
      </div>

      <div v-if="label == 'talkNum'">
        {{col.talkNum}}
      </div>

      <div v-if="label == 'quickAccount'">
        {{col.quickAccount}}
      </div>

      <div v-if="label == 'lastContactTime'">
        {{col.lastContactTime}}
      </div>

      <div v-if="label == 'field1'">
        {{col.field1}}
      </div>

      <div v-if="label == 'field2'">
        {{col.field2}}
      </div>

      <div v-if="label == 'field3'">
        {{col.field3}}
      </div>

      <div v-if="label == 'field4'">
        {{col.field4}}
      </div>

      <div v-if="label == 'field5'">
        {{col.field5}}
      </div>

      <div v-if="label == 'light'">
        <div style="text-align: center">
           <span class="icon-guding" style="font-size:25px;cursor: pointer;"
                      @click.stop="star(col.light, col.id)" v-if="!col.light"></span>
          <span class="icon-guding" style="font-size:25px;color:#3399F6;cursor: pointer;"
                @click.stop="star(col.light, col.id)" v-if="col.light"></span>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "tableTemplate",
        props: {
            col: Object,
            label:String,
            jurisdiction: Object,
            custType:{
                type:String,
                default() {
                    return 'my'
                }
            }
        },
        methods:{
            toDetail(id) {
                this.$emit('jump', id)
            },
            changeRate(value, rate) {
                this.$emit('handleChange', value, rate)
            },
            unlabel(custId, markId) {
                this.$emit('handleCancel', custId, markId)
            },
            star(value, index) {
                this.$emit('handleSign', value, index)
            }
        }
    }
</script>

<style scoped lang="scss">
  @import "../../styles/customer.scss"
</style>
